<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Toggle</title>
    <style>
        /* 简单的样式调整 */
        .mima{
            display: flex;
            align-items: center;
        }
        .mima img {
            cursor: pointer;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="mima">
        <input type="password" id="password" placeholder="输入密码">
        <img id="eye-icon" src="https://s1.aigei.com/src/img/png/0d/0d1717e6d2e24063b0dd96f457da8d29.png?imageMogr2/auto-orient/thumbnail/!282x282r/gravity/Center/crop/282x282/quality/85/%7CimageView2/2/w/282&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:_wjPxBcx5veUY0zwEaz2AutVOj8=" alt="">
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
    const passwordInput = document.getElementById('password');
    const eyeIcon = document.getElementById('eye-icon');
    const eyeOpenSrc = 'https://s1.aigei.com/src/img/png/d3/d34dddce47c445fcbf31b803d9109cb1.png?imageMogr2/auto-orient/thumbnail/!282x282r/gravity/Center/crop/282x282/quality/85/%7CimageView2/2/w/282&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:j63P6M03OMlx_pcBShSSqNPWdXU=';  // 替换为实际路径
    const eyeClosedSrc = 'https://s1.aigei.com/src/img/png/0d/0d1717e6d2e24063b0dd96f457da8d29.png?imageMogr2/auto-orient/thumbnail/!282x282r/gravity/Center/crop/282x282/quality/85/%7CimageView2/2/w/282&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:_wjPxBcx5veUY0zwEaz2AutVOj8=';  // 替换为实际路径
 
    eyeIcon.addEventListener('click', function() {
        // 切换密码输入框的类型
        const type = passwordInput.type === 'password' ? 'text' : 'password';
        passwordInput.type = type;
 
        // 切换眼睛图片
        eyeIcon.src = type === 'password' ? eyeClosedSrc : eyeOpenSrc;
    });
});
    </script>
</body>
</html>